import React, { Component } from 'react';
import { Label } from '@folio/stripes/components';
import PropTypes from 'prop-types';
import TetherComponent from 'react-tether';
import E from 'wangeditor';
 
import css from './DateCustomize/TimePerfectDropdown.css';

const propTypes = {
  autoFocus: PropTypes.bool,
  disabled: PropTypes.bool,
  id: PropTypes.string,
  input: PropTypes.object,
  label: PropTypes.node,
  locale: PropTypes.string,
  meta: PropTypes.object,
  onChange: PropTypes.func,
  readOnly: PropTypes.bool,
  required: PropTypes.bool,
  screenReaderMessage: PropTypes.string,
  showTimepicker: PropTypes.bool,
  tether: PropTypes.object,
  timeZone: PropTypes.string,
  value: PropTypes.string,
  buttonName:PropTypes.string
};
class EditorSachet extends Component {
  constructor(props) {
    super(props);
    this.state = {

      timeString: '',
      srMessage: '',
      editorContent:'',
      contentEditable:true,
      editor:null
    };
  }

    disableEditing=(text) => {
      this.setState({ contentEditable:false }, () => {
        this.init(text);
      });
    }

    componentDidMount() {

    }

    init=(obj) => {
      const {
        input,
        screenReaderMessage,
        label,
        readOnly,
        required,
        disabled,

      } = this.props;
      const elemMenu = this.refs.editorElemMenu;
      const elemBody = this.refs.editorElemBody;
      if (!this.state.editor && !!elemMenu && !!elemBody) {
        const editor = new E(elemMenu, elemBody);

        // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
        editor.customConfig.onchange = html => {
          const value = encodeURI(editor.txt.html());
          input.onChange(value);
        };

        //
        editor.customConfig.menus = [
          'head',  // 标题
          'bold',  // 粗体
          'fontSize',  // 字号
          'fontName',  // 字体
          'italic',  // 斜体
          'underline',  // 下划线
          'strikeThrough',  // 删除线
          'foreColor',  // 文字颜色
          'backColor',  // 背景颜色
          'link',  // 插入链接
          'list',  // 列表
          'justify',  // 对齐方式
          'quote',  // 引用
          'undo',  // 撤销
          'redo'  // 重复
        ];
        editor.customConfig.uploadImgShowBase64 = true;

        editor.create();
        editor.txt.html(obj);
        editor.$textElem.attr('contenteditable', disabled);

        this.setState(
          {
            editorContent:obj,
            editor
          }
        );
      } else if (this.state.editor && !!elemMenu && !!elemBody) {
        this.state.editor.txt.html(obj);
      }
    }

    render() {
      const {
        input,
      } = this.props;
      if (input) {
        let text = input.value;
        if (text != null && text != '' && text != 'null') {
          text = decodeURI(text);
          this.init(text);
        } else {
          this.init(null);
        }
      }
      return (
        <TetherComponent>
          <div style={{ position: 'relative', width: '100%' }} ref={(ref) => { this.container = ref; }}>
            <div
              aria-live="assertive"
              aria-relevant="additions"
              className={css.srOnly}
              ref={(ref) => { this.srSpace = ref; }}
            >
              <div>{this.state.srMessage}</div>
            </div>
            <Label>活动描述 </Label>
            <div
              className="shop"
              style={{ marginTop: '0.55rem'}}
            >
              <div className="text-area">
                <div
                  ref="editorElemMenu"
                  style={{ backgroundColor:'#f1f1f1', border:'1px solid #ccc' }}
                  className="editorElem-menu"
                />
                <div
                  style={{
                    overflowY:'auto',
                    height:300,
                    border:'1px solid #ccc',
                    borderTop:'none'
                  }}
                  ref="editorElemBody"
                  className="editorElem-body"
                />
              </div>
            </div>
          </div>

        </TetherComponent>
      );
    }
}

EditorSachet.propTypes = propTypes;

export default EditorSachet;
